<template>
  <!-- 会员卡管理页面 -->

  <!-- 搜索区块 -->
  <el-card>
    <el-row :gutter="20">
      <el-col :span="6">
        <el-input v-model="searchForm.no" placeholder="请输入会员卡号"></el-input>
      </el-col>
      <el-col :span="6">
        <el-input v-model="searchForm.tel" placeholder="请输入手机号"></el-input>
      </el-col>
      <el-col :span="6">
        <el-input v-model="searchForm.name" placeholder="请输入姓名"></el-input>
      </el-col>
      <el-col :span="6">
        <el-button type="primary" @click="loadData">查询</el-button>
        <el-button @click="handleReset">重置</el-button>
      </el-col>
    </el-row>
  </el-card>

  <!-- 信息区块 -->
  <el-card class="mt">
    <!-- 表格 -->
    <el-table :data="dataList" :loading="loading">
      <el-table-column type="index" label="序号" width="80"></el-table-column>
      <el-table-column prop="memberCardNumber" label="会员卡号"></el-table-column>
      <el-table-column prop="cardType" label="卡类型"></el-table-column>
      <el-table-column prop="issueDate" label="开卡日期"></el-table-column>
      <el-table-column prop="holderName" label="持卡人姓名"></el-table-column>
      <el-table-column prop="holderPhone" label="持卡人手机号"></el-table-column>
      <el-table-column prop="cardBalance" label="卡余额"></el-table-column>

      <el-table-column prop="transactionRecords" label="交易记录">
        <template #default="scope">
          <el-popover
            placement="top-start"
            title="交易记录"
            :width="200"
            trigger="hover"
            content="交易记录内容"
          >
            <template #reference>
              <el-button class="m-2">当日记录</el-button>
            </template>
            <!-- 时间线 -->
            <el-timeline style="max-width: 600px">
              <!-- 时间节点,循环展示 -->
              <el-timeline-item
                v-for="(item, index) in scope.row.transactionRecords"
                :key="index"
                color="#0bbd87"
                :timestamp="item.transactionDate"
              >
                <p>交易金额: {{ item.transactionAmount }}</p>
                <p>交易类型: {{ item.transactionType }}</p>
              </el-timeline-item>
            </el-timeline>
          </el-popover>
        </template>
      </el-table-column>

      <el-table-column prop="validUntil" label="有效期至"></el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-pagination
      class="mt mb fr"
      v-model:current-page="pageInfo.page"
      v-model:page-size="pageInfo.pageSize"
      :page-sizes="[10, 20, 30, 40]"
      background
      layout="total, sizes, prev, pager, next, jumper"
      :total="totals"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </el-card>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { useHttp } from "@/hokes/useHttp";

// 搜索表单数据
const searchForm = ref({
  no: "",
  tel: "",
  name: "",
});

// 调用自定义表格组件
const {
  dataList,
  loading,
  totals,
  pageInfo,
  loadData,
  handleCurrentChange,
  handleSizeChange,
  resetPagination,
} = useHttp("/membercard/memberList", searchForm);

// 重置表单
const handleReset = () => {
  searchForm.value = {
    no: "",
    tel: "",
    name: "",
  };
  resetPagination();
};
</script>

<style scoped></style>
